<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ include file="../common.jsp" %>
	  <!-- Graphs Box Start -->
	   <div id="graphs" class="contentcontainer">
	       <div class="headings alt">
	           <h2 class="left">Dynamic graph types</h2>
	           <ul class="smltabs">
	           	<li><a href="#graphs-1">Area chart</a></li>
	               <li><a href="#graphs-2">Pie chart</a></li>
	               <li><a href="#graphs-3">Line graph</a></li>
	               <li><a href="#graphs-4">Bar graph</a></li>
	           </ul>
	       </div>
	       <div id="graphs-1" class="contentbox">
			<table class="area" style="display: none;">
	                 <caption> Registered Members1</caption>
	                 <thead>
	                     <tr>
	                         <td></td>
	                         <th scope="col">Jan</th>
	                         <th scope="col">Feb</th>
	                         <th scope="col">March</th>
	                         <th scope="col">April</th>
	                         <th scope="col">May</th>
	                         <th scope="col">June</th>
	                     </tr>
	                 </thead>
	                 <tbody>
	                     <tr>
	                         <th scope="row">2010</th>
	                         <td>190</td>
	                         <td>160</td>
	                         <td>40</td>
	                         <td>120</td>
	                         <td>30</td>
	                         <td>70</td>
	                     </tr>
	                     <tr>
	                         <th scope="row">2009</th>
	                         <td>3</td>
	                         <td>40</td>
	                         <td>30</td>
	                         <td>45</td>
	                         <td>35</td>
	                         <td>49</td>
	                     </tr>	
	                 </tbody>
	             </table>
	     </div>
	     <div id="graphs-2" class="contentbox">
	     	<table class="pie" style="display: none;">
	               <caption> Registered Members2</caption>
	                   <thead>
	                       <tr>
	                           <td></td>
	                           <th scope="col">Jan</th>
	                           <th scope="col">Feb</th>
	                           <th scope="col">March</th>
	                           <th scope="col">April</th>
	                           <th scope="col">May</th>
	                           <th scope="col">June</th>
	                       </tr>
	                   </thead>
	                   <tbody>
	                       <tr>
	                           <th scope="row">2010</th>
	                           <td>190</td>
	                           <td>160</td>
	                           <td>40</td>
	                           <td>120</td>
	                           <td>30</td>
	                           <td>70</td>
	                       </tr>
	                       <tr>
	                           <th scope="row">2009</th>
	                           <td>3</td>
	                           <td>40</td>
	                           <td>30</td>
	                           <td>45</td>
	                           <td>35</td>
	                           <td>49</td>
	                       </tr>	
	                   </tbody>
	               </table>
	       </div>
	       <div id="graphs-3" class="contentbox">
	<table class="line" style="display: none;">
	                   <caption> Registered Members3</caption>
	                   <thead>
	                       <tr>
	                           <td></td>
	                           <th scope="col">Jan</th>
	                           <th scope="col">Feb</th>
	                           <th scope="col">March</th>
	                           <th scope="col">April</th>
	                           <th scope="col">May</th>
	                           <th scope="col">June</th>
	                       </tr>
	                   </thead>
	                   <tbody>
	                       <tr>
	                           <th scope="row">2010</th>
	                           <td>190</td>
	                           <td>160</td>
	                           <td>40</td>
	                           <td>120</td>
	                           <td>30</td>
	                           <td>70</td>
	                       </tr>
	                       <tr>
	                           <th scope="row">2009</th>
	                           <td>3</td>
	                           <td>40</td>
	                           <td>30</td>
	                           <td>45</td>
	                           <td>35</td>
	                           <td>49</td>
	                       </tr>	
	                   </tbody>
	               </table>
	       </div>
	       <div id="graphs-4" class="contentbox">
	<table class="bar" style="display: none;">
	                <caption> Registered Members4</caption>
	                 <thead>
	                     <tr>
	                         <td></td>
	                         <th scope="col">Jan</th>
	                         <th scope="col">Feb</th>
	                         <th scope="col">March</th>
	                         <th scope="col">April</th>
	                         <th scope="col">May</th>
	                         <th scope="col">June</th>
	                     </tr>
	                 </thead>
	                 <tbody>
	                     <tr>
	                         <th scope="row">2010</th>
	                         <td>190</td>
	                         <td>160</td>
	                         <td>40</td>
	                         <td>120</td>
	                         <td>30</td>
	                         <td>70</td>
	                     </tr>
	                     <tr>
	                         <th scope="row">2009</th>
	                         <td>3</td>
	                         <td>40</td>
	                         <td>30</td>
	                         <td>45</td>
	                         <td>35</td>
	                         <td>49</td>
	                     </tr>	
	                 </tbody>
	             </table>
	     </div>
	 </div>
	 <!-- Graphs Box End -->
	 
	<script type="text/javascript" src="${_ctx}/resource/scripts/enhance.js"></script>	
    <script type='text/javascript' src='${_ctx}/resource/scripts/excanvas.js'></script>
    <script type='text/javascript'>
		$(document).ready(function(){
			$("#tabs, #graphs").tabs();
			
 			$('table.pie').visualize({type: 'pie', height: '300px', width: '620px'});
			$('table.bar').visualize({type: 'bar', height: '300px', width: '620px'});
			$('table.area').visualize({type: 'area', height: '300px', width: '620px'});
			$('table.line').visualize({type: 'line', height: '300px', width: '620px'});
		});    	
    </script>